body {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    background-color: #fff;
}
a {
    text-decoration: none;
    color: #707070;
}
// 约束当屏幕大于750px的时候，html字体大小就不再变化了
@media screen and (min-width:750px) {
    html {
        font-size: 37.5px!important;
    }
}
.header {
    height: 2.133333rem;
    border-bottom: .0267rem solid #eaeaea;
    text-align: center;
    line-height: 2.133333rem;
    font-size: .9333rem;
    color: #1c1c1c;
}
h5 {
    display: block;
    width: 100%;
    height: 2.08rem;
    line-height: 2.08rem;
    margin: 0 ; 
    text-indent: .8rem;
    background-color: #f2f4f7;
}
.box {
    width: 100%;
    height: 23.4667rem;
    display: flex;
    flex-direction: column;
    .item {
        flex: 1;
        margin: .8rem .8rem .5333rem .8rem;
        p {
            font-size: .7467rem;
            line-height: 1.0667rem;
            color:#333333;
        }
        .one,
        .two {
            margin: .8rem .2667rem .8rem 0;
            display: inline-block;
            width: 2.6667rem;
            height: 1.0667rem;            
            border-radius: .1867rem;
            font-size: .6667rem;
            text-align: center;
            line-height: 1.0667rem; 
        }
        .one {
            border: .0267rem solid #48c6e5;
            color:#48c6e5;
        }
        .two {
            border: solid .0267rem #77d8c2;
            color:#77d8c2;
        }
        .nav {
            width: 100%;
            height: 1.0667rem;
            display: flex;
            justify-content: space-between;
            .da {
                width: 4rem;
                color: black;
                font-size: .6933rem;
                text-align: center;
                line-height: 1.0667rem;
                &::before {
                    content: "·";
                    color: #54c8e9;
                    padding-right: .2667rem;

                }
                &::after {
                    content: "·";
                    color:#54c8e9;
                    padding-left: .2667rem;
                }
            }
            .xian {
                margin: .56rem 0;
                width: 8.11rem;
                height: .0267rem;
                background-color: #707070;
                // border: .0267rem solid #707070;
            }    
        }
        .jx {
            text-indent: 2em;
            margin-bottom: 1.8667rem;
            font-size: .5867rem;
            line-height: 1.0667rem;
            color: #666666;
        }
    }
}
.kz {
    width: 100%;
    height: 19.4667rem;
    margin: .8rem;
    h6 {
        margin: 0;
        font-size: .6667rem;
        color: #54c8e9;
        font-weight: normal;
    }
    p {
        text-indent: 2em;
        font-size: .5867rem;
        line-height: 1.0667rem;
        color: #666666;
    }
    .kz-footer {
        width: 100%;
        height: 8.3467rem;
        border-radius: .2667rem;
        margin: .5333rem 0;
        padding-top: .8rem;
        background-color:#e8e8e8;
        p {
            font-size: .5867rem;
            line-height: 1.0667rem;
            color: #666666;
        }
    }
}
.footer {
    width: 100%;
    height: 2.4rem;
    border-top: .0267rem solid #707070;
    display: flex;
    margin-left: .8rem;
    .nav {
        margin: .8rem 0;
        flex: 1;
        display: flex;
        font-size: .6933rem;
        color: #666666;
        img{
            float: left;
            width: .8rem;
            height: .8rem;
        }
        span {
            float: left;
            display: inline-block;
            margin-left: .2667rem;
        }
        .item {
            flex: 1;
        }
    }
}
// color {
//     color:#52c4f0;
// }
